<template>
  <div id="register">
    <NavBar title="立即注册" />
    <img class="kf" src="@/assets/images/kf.png" alt="" />
    <tabs class="tabBox" v-model="active">
      <tab :title="item" v-for="item in tabItem" :key="item" :text="item" />
    </tabs>
    <Form @submit="onSubmit">
      <div class="areaCode" v-show="!active" @click="to('/areaCode')">
        <span>{{ this.areaCode }}</span>
        <div>{{ this.areaName }}</div>
      </div>
      <Field
        v-if="!active"
        v-model="tel"
        name="tel"
        type="tel"
        placeholder="请输入手机号"
        left-icon="phone"
      />
      <Field
        v-show="active"
        v-model="email"
        name="email"
        placeholder="请输入邮箱地址"
        left-icon="invition"
      />

      <div class="tianCode">
        <Field
          v-model="tianCode"
          type="digit"
          name="tianCode"
          placeholder="请输入验证码"
          left-icon="youzan-shield"
        />
        <SIdentify
          :identifyCode="identifyCode"
          @click.native="newIdentifyCode"
        />
      </div>
      <Field
        v-model="password"
        :type="!passwordStatus ? 'password' : 'text'"
        name="password"
        placeholder="请输入密码"
        left-icon="lock"
        right-icon="eye"
        @click-right-icon="passwordStatus = !passwordStatus"
      />
      <Field
        v-model="passwords"
        :type="!passwordStatuss ? 'password' : 'text'"
        name="passwords"
        placeholder="重复输入密码"
        left-icon="lock"
        right-icon="eye"
        @click-right-icon="passwordStatuss = !passwordStatuss"
      />
      <Field
        v-model="userName"
        name="userName"
        placeholder="请输入姓名"
        left-icon="manager"
      />
      <Field
        v-model="inviteCode"
        name="inviteCode"
        placeholder="请输入邀请码（必填）"
        left-icon="coupon"
      />
      <button round block type="info" native-type="submit">立即注册</button>
      <div class="agreement">
        注册即表示同意<span class="to" @click="to('agreement')">《用户协议》</span>
      </div>
    </Form>
  </div>
</template>

<script>
import SIdentify from '@/components/SIdentify'
import NavBar from '@/components/navbar'
import { Tab, Tabs, Form, Field } from 'vant'

export default {
  components: {
    Tab,
    Tabs,
    Form,
    Field,
    NavBar,
    SIdentify
  },
  data() {
    return {
      identifyCode: '1234', //验证码
      passwordStatus: false, //是否请输入密码明文密码
      passwordStatuss: false, //是否重复输入密码明文密码
      tabItem: ['手机注册', '邮箱注册'],
      active: 0, //注册方式index  0手机 1邮箱
      email:'',//邮箱地址
      areaCode: '+852', //区域code
      areaName: 'Hong Kong', //区域名称
      tel: '', //手机号
      tianCode: '', //填写的验证码
      password: '', //密码
      passwords: '', //重复密码
      userName: '', //姓名
      inviteCode: '' //邀请码
    }
  },
  created() {
    this.newIdentifyCode()
  },
  methods: {
    // 随机验证码
    newIdentifyCode() {
      this.identifyCode = String(
        Math.floor(Math.random() * (9999 - 1000) + 1000)
      )
    },
    //立即注册
    onSubmit(values) {
      if(this.identifyCode!=this.tianCode) return console.log('验证码错误')
      console.log('submit', values)
    },
    to(to){
      this.$router.push({path:to})
    }
  }
}
</script>

<style lang="less" scoped>
#register {
  /deep/.van-tabs__line {
    width: 20px;
    background: #559aff;
  }
  /deep/.van-tab--active {
    font-size: 16px;
    font-weight: 700;
  }
  .van-form {
    display: flex;
    flex-direction: column;
    width: 80%;
    padding-top: 20px !important;
    margin: 0 auto;
    .areaCode {
      height: 40px;
      display: flex;
      align-items: center;
      border-radius: 50px;
      border: solid 1px #e6eaed;
      padding: 0 10px;
      color: #000;
      font-size: 14px;
      span{
        padding: 0 8px;
      }
      div{
        padding-left: 8px;
        line-height: 20px;
        border-left: solid 1px #e5e5e5;
      }
    }
    .van-cell {
      margin: 10px 0;
      padding: 8px 15px;
      border-radius: 30px;
      border: solid 1px #e6eaed;
      font-size: 14px;
    }
    button {
      margin: 40px 0;
      border: none;
      width: 100%;
      border-radius: 200px;
      font-size: 16px;
      height: 40px;
      line-height: 40px;
      background: #588bf7;
      color: #fff;
    }
    .tianCode {
      display: flex;
      align-items: center;
    }
    .agreement {
      text-align: center;
      .to {
        color: #888;
      }
    }
  }
  .kf {
    position: fixed;
    right: 15px;
    bottom: 50px;
    width: 50px;
    height: 50px;
    border-radius: 200px;
    z-index: 99;
    text-align: center;
    background: #fff;
  }
}
</style>
